<template>
	<view class="page_news">
		<view class="card">
			<view class="list">
				<navigator class="list_item flex bgfff mb28" v-for="(item, index) in dataSouce" :key="index"  :url="'/pages/news/detail?id='+item.id">
					<view class="left flex-sk0 cfff flex flex-col just-center align-center" :class="{ bg_red: index % 2 == 1 }"
						v-if="item.picUrl">
						<image :src="$fullImage(item.picUrl)" mode="aspectFill"></image>
					</view>
					<view class="right flex flex-col just-sb">
						<view class="c333 fwb text-ellipsis-2 mb28">{{item.newsTitle}}</view>
						<view class="flex just-sb c999 fs22">
							<view>{{item.authorName}}</view>
							<view>{{item.sourceTime}}</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		useListHook
	} from '@/utils/hooks.js'
	import {
		getAction,
		fullImage,
		gateway
	} from '@/utils/api.js'
	export default {
		mixins: [useListHook],
		data() {
			return {
				listUrl: gateway.operate+'/news/newInfo/list',
				params: {
					projectId: '1676525879339474946'
				},
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.page_news {
		.card {
			padding: 28rpx;
		}

		.list_item {

			// height: 80vh;
			.left {
				width: 209.03rpx;
				height: 209.03rpx;
				background: linear-gradient(180deg, #67a0ff, #ede1ff);
				border-radius: 16.67rpx;
				overflow: hidden;

				>view:nth-child(1) {
					font-size: 33rpx;
					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
					font-weight: 400;
					letter-spacing: 3.33rpx;
				}

				>view:nth-child(2) {
					opacity: 0.44;
					font-size: 42.36rpx;
					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
					font-weight: 400;
					text-align: left;
				}

				&.bg_red {
					background: linear-gradient(180deg, #ff6767, #ffe1e1);
				}
			}

			.right {
				padding: 33rpx 28rpx;
			}
		}
	}
</style>